<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav">
		<a id="window-back" href="javascript:void(0)" data-am-offcanvas> <i
			class="am-icon-chevron-left"></i>
		</a>
	</div>
	<div style="text-align: center">
		<div id="categoryDropdown" class="am-dropdown" data-am-dropdown>
			<button id="categoryDisplay" class="am-btn am-btn-primary am-dropdown-toggle"
				style="line-height: 1.4" data-code="${defaultCategory.code}" data-am-dropdown-toggle>
				<span>${defaultCategory.name}</span> <span class="am-icon-caret-down"></span>
			</button>
			<ul id="categoryList" class="am-dropdown-content">
				<c:forEach items="${categories}" var="category">
					<li <c:if test="${category.code == defaultCategory.code}">class="am-active"</c:if>><a href="javascript:void(0)"
								data-code="${category.code}">${category.name}</a></li>
				</c:forEach>
				<!-- <li class="am-active"><a href="javascript:void(0)">汽车座套</a></li>
				<li><a href="javascript:void(0)">汽车座垫</a></li>
				<li><a href="javascript:void(0)">方向盘套</a></li>
				<li><a href="javascript:void(0)">脚垫/尾箱垫</a></li>
				<li><a href="javascript:void(0)">中控/导航</a></li>
				<li><a href="javascript:void(0)">贴膜/改装</a></li> -->
			</ul>
		</div>
	</div>
	<div class="am-header-right am-header-nav">
		<a id="searchIcon" href="javascript:void(0)"
			data-am-collapse="{target: '#carSearchForm'}"> <i
			class="am-header-icon am-icon-search"></i>
		</a>
	</div>
</header>

<!-- search dox -->
<form id="carSearchForm" class="am-form am-form-horizontal am-collapse">
	<div class="am-form-group am-cf">
		<input id="searchModelInput" type="text" placeholder="请输入车型编码" class="am-fl"
			style="width: 80%">
		<button id="searchBtn" type="button" class="am-btn am-btn-success am-fr searchBtn"
				style="width: 20%">搜索</button>
		<button id="cancelBtn" type="button" class="am-btn am-btn-danger am-fr am-hide"
				style="width: 20%">取消</button>
	</div>
</form>

<div class="wrapper slide am-hide">
	<ul class="am-list ">
		<li><a href="javascript:void(0)">A</a></li>
		<li><a href="javascript:void(0)">B</a></li>
		<li><a href="javascript:void(0)">C</a></li>
		<li><a href="javascript:void(0)">D</a></li>
		<li><a href="javascript:void(0)">E</a></li>
		<li><a href="javascript:void(0)">F</a></li>
		<li><a href="javascript:void(0)">G</a></li>
		<li><a href="javascript:void(0)">H</a></li>
		<li><a href="javascript:void(0)">I</a></li>
		<li><a href="javascript:void(0)">J</a></li>
		<li><a href="javascript:void(0)">K</a></li>
		<li><a href="javascript:void(0)">L</a></li>
		<li><a href="javascript:void(0)">M</a></li>
		<li><a href="javascript:void(0)">N</a></li>
		<li><a href="javascript:void(0)">O</a></li>
		<li><a href="javascript:void(0)">P</a></li>
		<li><a href="javascript:void(0)">Q</a></li>
		<li><a href="javascript:void(0)">R</a></li>
		<li><a href="javascript:void(0)">S</a></li>
		<li><a href="javascript:void(0)">T</a></li>
		<li><a href="javascript:void(0)">U</a></li>
		<li><a href="javascript:void(0)">V</a></li>
		<li><a href="javascript:void(0)">W</a></li>
		<li><a href="javascript:void(0)">X</a></li>
		<li><a href="javascript:void(0)">Y</a></li>
		<li><a href="javascript:void(0)">Z</a></li>
	</ul>
</div> 

<span id="alphaTip" class="am-badge am-badge-success am-round am-text-lg alphaTip am-hide" style="position:fixed;right:50px;top:300px;z-index:999;">A</span>

<!-- main content -->	
<div id="widgetList1" class="widget-list am-hide">
	<ul class="am-list m-widget-list brandWidgets">
		<c:forEach items="${vehiclesMap}" var="vehicleBrandList">
			<c:forEach items="${vehicleBrandList.value}" var="brand" varStatus="vs">
				<li <c:if test="${vs.index==0}">id="${vehicleBrandList.key}"</c:if>><a id="${brand.id}" href="javascript:void(0)" data-rel="accordion"><img
				class="widget-icon" src="files${brand.signePath}"
				alt="Accordion" /> <span class="widget-name">${brand.alphabet}.${brand.name}</span></a></li>
			</c:forEach>
		</c:forEach>
	</ul>
	<c:forEach items="${vehiclesMap}" var="vehicleBrandList">
		<c:forEach items="${vehicleBrandList.value}" var="brand">
			<ul id="line${brand.id}" class="am-list m-widget-list am-hide lineWidgets">
				<c:forEach items="${brand.lines}" var="line">
					<li><a id="${line.id}" href="javascript:void(0)" data-rel="accordion">
							<span class="widget-name">${line.name}</span>
					</a></li>
				</c:forEach>
			</ul>
		</c:forEach>
	</c:forEach>
	<c:forEach items="${vehiclesMap}" var="vehicleBrandList">
		<c:forEach items="${vehicleBrandList.value}" var="brand">
			<c:forEach items="${brand.lines}" var="line">
				<ul id="model${line.id}" class="am-list m-widget-list am-hide modelWidgets">
					<c:forEach items="${line.models}" var="model">
						<li><a class="model" data-modelId="${model.id}" data-modelName="${model.name}"
							href="javascript:void(0)"
							data-rel="accordion"> <span class="widget-name">${model.name}</span>
						</a></li>
					</c:forEach>
				</ul>
			</c:forEach>
		</c:forEach>
	</c:forEach>
</div>

<div id="widgetList2" class="widget-list am-hide">
	
</div> 
<script type="text/javascript">
	var lastWidget;
	var currentWidget;
	$(function() {
		$('.widget-list').css('width',(document.body.clientWidth-30)+'px');
		$('.slide ul li').css('height',(window.innerHeight-98)/26+'px');
		$('#widgetList1').removeClass('am-hide');
		$('.slide').removeClass('am-hide');
		
		$('.slide').click(function (event) {
			var $target = $(event.target);
            var alpha = $target.text();
            var alphaPosition = $target.parent().position().top+49;
            $alphaLi=$('#'+ alpha);
            if($alphaLi.length>0){
            	 var position = $alphaLi[0].offsetTop-49;
                 var $w = $(window);
                 $w.smoothScroll({position: position});
            }
            var $alphaTip = $('#alphaTip');
            $alphaTip.css('top',alphaPosition+"px").text(alpha);
            $alphaTip.removeClass('am-hide');
            setTimeout(function(){
            	$alphaTip.addClass('am-hide');
            },1000);
        });
		
		$('#categoryList li a').click(function(){
			$('#categoryList li').removeClass('am-active');
			$(this).parent().addClass('am-active');
			var $item = $(this);
			$('#categoryDisplay span:first').text($item.text()).attr('data-code',$item.attr('data-code'));
			$('#categoryDisplay').attr('data-code',$item.attr('data-code'));
			$('#categoryDropdown').dropdown('close');
		});
		
		$('.model').click(function(){
			var modelId = $(this).attr('data-modelId');
			var modelName = $(this).attr('data-modelName');
			var category = $('#categoryDisplay').attr('data-code');
			location.href = 'mobile/selection/products?modelId='+modelId+'&modelName='+encodeURI(encodeURI(modelName))+'&category='+category;
		});
		
		$('.brandWidgets a').click(function() {
			$('.brandWidgets').addClass('am-hide');
			var id = $(this).attr('id');
			var lineId = "line"+id;
			$line=$('#'+lineId);
			$headerLeft = $('.am-header-left');
			$headerLeft.empty();
			$headerLeft.append('<a id="inner-block-back" href="javascript:void(0)" onclick="innerBlockBack()" data-am-offcanvas><i class="am-icon-chevron-left"></i></a>');
			lastWidget = '.brandWidgets';
			currentWidget = "#"+lineId;
			$('.widget-list').css('width','100%');
			$line.removeClass('am-hide');
			animation($line,
					[ 'am-animation-slide-right' ]);
			$('.slide').addClass('am-hide');
		});
		
		$('.lineWidgets a').click(function() {
			lastWidget = currentWidget;
			$(lastWidget).addClass('am-hide');
			var id = $(this).attr('id');
			$model = $('#model'+id);
			currentWidget = '#model'+id;
			$model.removeClass('am-hide');
			animation($model,
					[ 'am-animation-slide-right' ]);
		});

		$('#searchBtn').click(function() {
			var keywords = $('#searchModelInput').val();
			if(isNotEmpty(keywords)){
				$.post('mobile/selection/findModelByKeyWords', {
					keywords : keywords
				}, function(result) {
					if (result.code == 'ACK') {
						if(result.message == 'errorMsg'){
							showAlert(result.data);
						}else{
							$('#widgetList1').addClass('am-hide');
							$widgetList2 = $('#widgetList2');
							$widgetList2.empty();
							$.each(result.data, function(i, model) {
								var fragment = '<ul class="am-list m-widget-list">' 
								+'<li><a class="model" data-modelId="'+model.id+'" data-modelName="'+model.name+'"'
								+' href="javascript:void(0)" data-rel="accordion">'
								+'<span class="widget-name">'+model.lineName+' - '+model.name+'</span></a></li>';
								$widgetList2.append(fragment);
							});
							$widgetList2.removeClass('am-hide')
							animation($('#widgetList2'),
									[ 'am-animation-slide-left' ]);
							$('#searchBtn').addClass('am-hide');
							$('#cancelBtn').removeClass('am-hide');
							$('.model').click(function(){
								var modelId = $(this).attr('data-modelId');
								var modelName = $(this).attr('data-modelName');
								var category = $('#categoryDisplay').attr('data-code');
								location.href = 'mobile/selection/products?modelId='+modelId+'&modelName='+encodeURI(encodeURI(modelName))+'&category='+category;
							});
						}
					}
				}, 'json');
			}else{
				showAlert("搜索关键字不能为空");
			}
		});
		
		$('#cancelBtn').click(function(){
			$('#cancelBtn').addClass('am-hide');
			$('#searchBtn').removeClass('am-hide');
			$('#widgetList2').addClass('am-hide');
			$('#widgetList1').removeClass('am-hide');
			animation($('#widgetList1'),
					[ 'am-animation-slide-left' ]);
		});
		
	});
	
	function innerBlockBack(){
		$(currentWidget).addClass('am-hide');
		var $lastWidget = $(lastWidget);
		$lastWidget.removeClass('am-hide');
		animation($lastWidget,
				[ 'am-animation-slide-left' ]);
		if(currentWidget.indexOf('model')!=-1){
			currentWidget = lastWidget;
			lastWidget = '.brandWidgets';
		}else if(currentWidget.indexOf('line')!=-1){
			currentWidget = '.brandWidgets';
			lastWidget = "";
			$headerLeft = $('.am-header-left');
			$headerLeft.empty();
			$headerLeft.append('<a id="window-back" href="javascript:void(0)" data-am-offcanvas><i class="am-icon-chevron-left"></i></a>');
			$('.slide').removeClass('am-hide');
			$('.widget-list').css('width',(document.body.clientWidth-30)+'px');
		}
		
	}
</script>